import React, { Component } from "react";

function UserGreeting(props) {
  return <h1>welcome!</h1>;
}

function GuestGreeting(props) {
  return <h1>please sign up.</h1>;
}

function Greeting(props) {
  const { isLoggedIn } = props;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

function ButtonLogin(props) {
  return <button onClick={props.onClick}>Login</button>;
}

function ButtonLogout(props) {
  return <button onClick={props.onClick}>Logout</button>;
}

function MailBox(props) {
  const unreadList = props.unreadList;
  return (
    <div>
      <h1>Hello1</h1>
      {unreadList.length > 0 && (
        <h2>you have {unreadList.length} unread message</h2>
      )}
    </div>
  );
}

function ListItem(props) {
  return <li>{props.value}</li>;
}
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((item) => {
    return <ListItem key={item.toString()} value={item} />;
  });
  if(numbers.length===3){
    return <ul>3333{listItems}</ul>;
  }
  return <ul>{numbers.map(item=>{
    return <ListItem key={item.toString()} value={item} />
  })}</ul>;
}
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false,
    };
    this.handleLogin = this.handleLogin.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
  }

  handleLogin() {
    this.setState({
      isLoggedIn: true,
    });
  }

  handleLogout() {
    this.setState({
      isLoggedIn: false,
    });
  }

  render() {
    const { isLoggedIn } = this.state;
    let button;
    if (isLoggedIn) {
      button = <ButtonLogout onClick={this.handleLogout} />;
    } else {
      button = <ButtonLogin onClick={this.handleLogin} />;
    }
    return (
      <div>
        <Greeting isLoggedIn={this.state.isLoggedIn} />
        {this.state.isLoggedIn && <MailBox unreadList={["11", "22"]} />}
        <NumberList numbers={[1,2,3,5]} />
        {button}
      </div>
    );
  }
}
export default Login;
